<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">联合体信息</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="flex">
            <p>
              <span class="title">联合体名称：</span
              >{{ state.detail.lianhetimingcheng }}
            </p>
            <p class="ml50">
              <span class="title"
                >发布公司名称：{{ state.detail.fabugongsi }}</span
              >
            </p>
            <p class="ml50">
              <span class="title">一级分类：</span>{{ state.detail.leixing1 }}
            </p>
            <p class="ml50">
              <span class="title">二级分类：</span>{{ state.detail.leixing2 }}
            </p>
          </div>
          <div class="flex">
            <p>
              <span class="title">联合体主理人：</span
              >{{ state.detail.zhuliren }}
            </p>
            <p class="ml50">
              <span class="title"
                >联合体简介：{{ state.detail.xiangmujieshao }}</span
              >
            </p>
          </div>
          <div class="intro-img flex">
            <div
              class="show-box"
              v-for="(item, index) in state.detail.lianhetijieshao"
              :key="index"
            >
              <img v-if="item.fileType != 'mp4'" :src="item.filePath" alt="" />
              <video controls v-else :src="item.filePath"></video>
            </div>
          </div>
          <div class="flex">
            <p style="width: 50%">
              <span class="title">备注：</span>{{ state.detail.beizhu }}
            </p>
          </div>
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">参与公司</span>
            </div>
          </div>
          <el-button type="primary" size="large" @click="addCompanies"
            >添加公司</el-button
          >
          <el-dialog
            class="list-dialog"
            show-close="false"
            width="70%"
            v-model="state.show"
            center
            style="padding: 0 30px"
          >
            <el-table
              :data="state.engageCompanies"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column property="gysNo" label="参与公司编号" />
              <el-table-column
                property="gongsimingcheng"
                label="参与公司名称"
              />
            </el-table>
            <el-form-item class="note-button-group mt40">
              <el-button size="large" @click="state.show = false"
                >取消</el-button
              >
              <el-button class="ml50" size="large" type="primary" @click="add">
                添加
              </el-button>
            </el-form-item>
          </el-dialog>
          <el-table
            border
            :data="state.companiesList"
            style="width: calc(100% - 20px); margin-top: 20px"
          >
            <el-table-column property="gysNo" label="编号" align="center" />
            <el-table-column
              property="zhuyingyewu1"
              label="一级分类"
              align="center"
            />
            <el-table-column
              property="zhuyingyewu2"
              label="二级分类"
              align="center"
            />
            <el-table-column
              property="zhuyingyewu3"
              label="三级分类"
              align="center"
            />
            <el-table-column
              property="gongsimingcheng"
              label="公司全称"
              align="center"
            />
            <el-table-column
              property="chanpinshuliang"
              label="主打产品/数量"
              align="center"
            />
            <el-table-column
              property="yejishuliang"
              label="业绩案例/数量"
              align="center"
            />
            <el-table-column
              property="yewufuzeren"
              label="业务第一负责人"
              width="140"
              align="center"
            />
            <el-table-column
              property="jishufuzerenshuliang"
              label="技术第一负责人/数量"
              width="155"
              align="center"
            />
            <el-table-column
              property="jingyinglianxirenshuliang"
              label="经营联系人/数量"
              width="150"
              align="center"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
              align="center"
            >
              <template #default="scope">
                <el-button
                  style="min-width: auto"
                  link
                  type="primary"
                  size="small"
                  @click.prevent="onOperation(scope.row, 'detail')"
                  >详情</el-button
                >
                <el-button
                  style="min-width: auto"
                  link
                  type="primary"
                  size="small"
                  v-if="scope.row.fabu?.code != 1"
                  @click.prevent="onOperation(scope.row, 'delete')"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  GetConsortiumDetail,
  GetConsortiumDetailCompanies,
  DeleteGetConsortiumCompany,
  AddGetConsortiumCompany
} from "@/api/consortium";
import { GetProviderOptions } from "@/api/provider";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
  companiesList: [],
  engageCompanies: [],
  show: false,
  form: {
    lhtNo: '',
    gysNo: []
  }
});
const GetList = () => {
  GetConsortiumDetail({ id: route.query.id }).then((res) => {
    if (res.code === 4201) {
      state.detail = res.data;
      state.form.lhtNo = res.data.lhtNo
      GetCompaniesList();
    }
  });
};
// 获取联合体参与公司列表
const GetCompaniesList = () => {
  GetConsortiumDetailCompanies({ lhtNo: state.detail.lhtNo }).then((res) => {
    if (res.code == 4201) {
      state.companiesList = res.data;
    }
  });
};
// 选择参与公司
const handleSelectionChange = (val) => {
  state.form.gysNo = val.map(item => {
    return item.gysNo
  })
}
// 添加参与公司
const add = () => {
  AddGetConsortiumCompany(state.form).then(res => {
    if(res.code == 4202) {
      baseMsg('添加成功');
      state.show = false;
      GetCompaniesList();
    }
  })
};
const onOperation = (params, operation) => {
  if (operation === "delete") {
    elMessageTip({
      ok() {
        DeleteGetConsortiumCompany({
          id: params.id,
        }).then((res) => {
          if (res.code == 4201 || res.code == 4202) {
            baseMsg("删除成功");
            GetCompaniesList();
          }
        });
      },
    });
  }
  if (operation === "detail") {
    router.push({
      path: `/gongyingshang/detail`,
      query: {
        id: params.gid,
      },
    });
  }
};
const addCompanies = () => {
  GetProviderOptions().then((res) => {
    state.engageCompanies = res.data;
    if (res.code == 4201) {
      for (let i = 0; i < state.companiesList.length; i++) {
        for (let j = 0; j < state.engageCompanies.length; j++) {
          if (state.companiesList[i].gysNo === state.engageCompanies[j].gysNo) {
            state.engageCompanies.splice(j, 1);
          }
        }
      }
    }
    state.show = true;
  });
};
GetList();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
p {
  font-size: 12px;
  color: #333333;
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 0px 50px 50px 50px;
}
.intro-img {
  .show-box {
    &:not(:first-child) {
      margin-left: 20px;
    }
    img,
    video {
      width: 140px;
      height: 80px;
      border-radius: 4px;
    }
  }
}
.operation {
  width: 500px;
  margin-top: 100px;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
